<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
			width: 80%;
			height: 600px;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../move.js"></script>
<script>
    // OOA：烟花：点击创建元素，元素运动，删除，在创建，运动，删除
        // 1. 获取元素
        // 2. 绑定事件
            // 3. 创建元素
            // 4. 开始运动
                // 5. 运动结束后，删除元素，创建多个元素
                // 6. 运动
                // 7. 到终点之后，再删除
    // OOD
        // class Fire{
        //     constructor(){
        //         // 获取元素
        //         // ...
        //         // 执行绑定事件
        //     }
        //     addEvent(){
        //         // 绑定事件
        //             // 执行创建元素
        //             // 执行开始运动
        //     }
        //     createEle(){
        //         // 创建元素
        //     }
        //     move(){
        //         // 开始运动
        //             // 运动结束，执行删除
        //             // 执行创建小元素
        //     }
        //     createSmall(){
        //         // 创建元素
        //         // 执行开始运动
        //     }
        //     smallMove(){
        //         // 运动
        //             // 结束，删除
        //     }
        // }

    // OOP
        class Fire{
            constructor(){
                // 获取元素
                this.cont = document.getElementById("container");
                // 执行绑定事件
                this.addEvent()
            }
            addEvent(){
                const that = this;
                // 绑定事件
                this.cont.onclick = function(eve){
                    that.e = eve || window.event;
                    // 执行创建元素
                    that.createEle();
                }
            }
            createEle(){
                // 创建元素
                this.fire = document.createElement("div");
                this.fire.className = "fire";
                this.fire.style.background = "#fff";
                this.fire.style.left = this.e.offsetX + "px";
                this.cont.appendChild(this.fire);
                // 执行开始运动
                this.move();
            }
            move(){
                // 开始运动
                move(this.fire, {
                    top: this.e.offsetY
                },()=>{
                    // 运动结束，执行删除
                    this.fire.remove();
                    // 执行创建小元素
                })
            }
            createSmall(){
                // 创建元素
                // 执行开始运动
            }
            smallMove(){
                // 运动
                    // 结束，删除
            }
        }

        new Fire();


        // 工厂模式
            // 批量创建同类型对象
            // 每个对象虽然同类型可是每个对象都是新的


</script>
</html>